<template>
  <!-- 省份弹出框 -->
  <van-popup
    v-model:show="store.state.area.isArea"
    position="top"
    round
    :style="{ height: '50%', width: '100% ' }"
    @close="handleClose"
  >
    <div class="popup_content">
      <!-- 省份 -->
      <div class="subject_box">
        <div class="title">选择省份</div>
        <div class="list">
          <div
            :class="areaIndex == item ? 'active' : 'item'"
            v-for="item in province"
            :key="item"
            @click="handleActive(item)"
          >
            <p>{{ item }}</p>
          </div>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script>
import { ref } from "@vue/reactivity";
import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore();
    // 选择省份
    const province = ref([
      "北京",
      "天津",
      "河北",
      "山西",
      "内蒙古",
      "辽宁",
      "吉林",
      "黑龙江",
      "上海",
      "江苏",
      "浙江",
      "安徽",
      "福建",
      "江西",
      "山东",
      "河南",
      "湖北",
      "湖南",
      "广东",
      "广西",
      "海南",
      "重庆",
      "四川",
      "贵州",
      "云南",
      "西藏",
      "陕西",
      "甘肃",
      "青海",
      "宁夏",
      "新疆",
      "台湾",
      "香港",
      "澳门",
    ]);
    const areaIndex = ref(store.state.area.province);
    const handleActive = (option) => {
      //   console.log(option);
      areaIndex.value = option;
      store.commit("area/showAreaPopup", { isPopup: false, option });
    };
    // 关闭弹出框
    const handleClose = () => {
      store.commit("area/showAreaPopup", { isPopup: false });
    };
    return {
      store,
      province,
      areaIndex,
      handleActive,
      handleClose,
    };
  },
};
</script>

<style lang="less" scoped>
.popup_content {
  height: 100%;
  padding: 0 0.5rem;
  box-sizing: border-box;
  .subject_box {
    .title {
      height: 2rem;
      line-height: 2rem;
      font-size: 1.15rem;
      font-weight: bold;
      letter-spacing: 0.25rem;
    }
    .list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .item {
        background-color: #f7f7f7;
        width: 5rem;
        height: 2.5rem;
        border-radius: 0.3rem;
        padding: 0.5rem;
        box-sizing: border-box;
        font-size: 0.88rem;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0.5rem 0;
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          word-break: break-all;
        }
      }
      .active {
        color: red;
        font-weight: bold;
        background: rgb(255 234 232);
        // border: 1px solid red;
        width: 5rem;
        height: 2.5rem;
        border-radius: 0.3rem;
        padding: 0.5rem;
        box-sizing: border-box;
        font-size: 0.88rem;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0.5rem 0;
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          word-break: break-all;
        }
      }
    }
  }
  .subject_box {
    padding: 0.5rem 0;
  }
}
</style>
